<template>
    <div class="work-container">
        <el-dialog v-model="visible" width="900px" align-center>
            <div class="work-body">
                <div class="left-part">
                    <div class="carousel-part shape" w-full>
                        <div @mouseenter="() => showArrows = true" @mouseleave="() => showArrows = false" h-full w-full>
                            <div class="carousel-main" id="carousel-main" w-full h-full flex
                                :style="{ transform: `translateX(${translateX}px)`, transitionDuration: `${duration}ms`, color: fontColor }">
                                <div class="carousel-item" w-full h-full style="perspective: 100px;">
                                    <div style="transition: all .3s ease-out;"
                                        :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }">
                                        <div class="item-cal flex-x flex-y iconsize-1" fs-12 style="font-weight: 700;"
                                            :style="bgStyle">
                                            <span>{{ time }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item" w-full h-full style="perspective: 200px;">
                                    <div style="transition: all .3s ease-out;"
                                        :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }">
                                        <div class="item-cal iconsize-2" :style="bgStyle">
                                            <div class="ac" style="line-height: 1;">
                                                <span style="font-size: 0.6em;" block>下班还有</span>
                                                <span style="font-size:1em;font-weight:bold" block>{{ time }}</span>
                                            </div>
                                            <div class="item-bg"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item" w-full h-full style="perspective: 200px;">
                                    <div style="transition: all .3s ease-out;"
                                        :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }">
                                        <div class="item-cal iconsize-3" :style="bgStyle">
                                            <div style="height: 60%;line-height:1.5">
                                                <div style="font-size:1.2em">{{ time.split(':')[0] }}</div>
                                                <div style="font-size:1.2em">{{ time.split(':')[1] }}</div>
                                                <div style="font-size:1.2em">{{ time.split(':')[2] }}</div>
                                            </div>
                                            <div class="item-bg"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="carousel-item" w-full h-full style="perspective: 400px;">
                                    <div style="transition: all .3s ease-out;"
                                        :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }">
                                        <div class="item-cal iconsize-4" :style="bgStyle">
                                            <div class="ac">
                                                <span style="font-size: 0.6em;line-height:2.3" block>下班还有</span>
                                                <span style="font-size:2em;font-weight:bold" block>{{ time }}</span>
                                            </div>
                                            <div class="item-bg"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item" w-full h-full style="perspective: 800px;">
                                    <div style="transition: all .3s ease-out;"
                                        :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }">
                                        <div class="item-cal iconsize-5" :style="bgStyle">
                                            <div class="height:47%">
                                                <div>下班还有</div>
                                                <div style="font-size:2.3em;font-weight:bold;line-height:1.2">{{ time }}
                                                </div>
                                            </div>
                                            <div class="check-more">
                                                <div class="check-item">
                                                    <div>发薪</div>
                                                    <p>20</p>
                                                    <p>天</p>
                                                </div>
                                                <div class="check-item">
                                                    <p>周五</p>
                                                    <p>4</p>
                                                    <p>天</p>
                                                </div>
                                                <div class="check-item">
                                                    <p>中秋节</p>
                                                    <p>4</p>
                                                    <p>天</p>
                                                </div>
                                                <div class="check-item" style="width: 17.5%;">
                                                    <p>今天赚了</p>
                                                    <p>￥</p>
                                                    <p>2000.00</p>
                                                </div>
                                            </div>
                                            <div class="item-bg"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="left-arrow" @click.stop="handleMoveLeft" v-show="showArrows">左</div>
                            <div class="right-arrow" @click.stop="handleMoveRight" v-show="showArrows">右</div>
                            <div class="carousel-dots" flex>
                                <div class="dot-item" v-for="(item, index) in dots" :key="item"
                                    :class="{ active: -leftWidth * index == translateX }" @click="handleMove(index)"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="right-part">
                    <div class="work-header">
                        <span title="关闭">
                            <Icon name="Close" color="white" icon-size="0.8em" @click="handleClose" />
                        </span>
                    </div>
                    <div class="config-item">
                        <span>组件名称</span>
                        <el-input fs-12 size="small" v-model="name"></el-input>
                    </div>
                    <div class="config-item">
                        <span>工作日</span>
                        <ul flex class="week-part">
                            <li v-for="item in weekDays">
                                <el-checkbox-button border size="small" v-model="item.value">{{ item.label
                                }}</el-checkbox-button>
                            </li>
                        </ul>
                    </div>
                    <div class="config-item">
                        <span>工作时间</span>
                        <div style="width: 200px;">
                            <el-time-picker v-model="workDate" @change="handleSelectWorkDate" format="HH:mm" is-range
                                range-separator="至" fs-12 size="small"></el-time-picker>
                        </div>
                    </div>
                    <div class="config-item">
                        <span>字体颜色</span>
                        <ul flex class="font-part">
                            <li v-for="(item, index) in fontColors">
                                <div class="font-item" :class="{ 'is-white': index == 0 }" :style="{ background: item }"
                                    @click="handleSelectColor(item)">
                                    <i class="iconfont icon-gou" :style="{ color: index == 0 ? 'gray' : '#fff' }"
                                        v-if="fontColor == item"></i>
                                </div>
                            </li>
                            <li>
                                <el-color-picker v-model="fontColor" />
                            </li>
                        </ul>
                    </div>
                    <div class="bg-part">
                        背景
                        <span fs-12 :class="{ active: bgActive == 1 }" @click="handleChangeBgType(1)">颜色</span>
                        <span fs-12 :class="{ active: bgActive == 2 }" @click="handleChangeBgType(2)">图片</span>
                    </div>
                    <div class="config-item" style="padding: 8px 16px 8px 10px;" v-show="bgActive == 1">
                        <ul flex class="font-part" pd0>
                            <li v-for="(item, index) in bgColors">
                                <div class="font-item" style="margin-right: 5px;" :class="{ 'is-white': index == 0 }"
                                    :style="{ background: item }" @click="handleSelectBgColor(item)">
                                    <i class="iconfont icon-gou" :style="{ color: index == 0 ? 'gray' : '#fff' }"
                                        v-if="bgColor == item"></i>
                                </div>
                            </li>
                            <li>
                                <el-color-picker v-model="bgColor" />
                            </li>
                        </ul>
                    </div>
                    <div class="config-item img-item" flex v-show="bgActive == 2">
                        <div w-full class="img-part">
                            <div class="scroll-part" id="img-scroll" w-full>
                                <div inline-flex pd0
                                    :style="{ transform: `translateX(${imgTranslateX}px)`, transitionDuration: `${imgDuration}ms` }">
                                    <li class="img-li" v-for="item in bgImgs">
                                        <img :src="item.url" alt="" :draggable="true"
                                            @click.stop="handleSelectBgImg(item.url)">
                                    </li>
                                </div>
                            </div>
                        </div>
                        <div class="slider-part" w-full flex justify-around fs-14>
                            <span>蒙版</span>
                            <el-slider v-model="slider"></el-slider>
                            <span>{{ slider }}&nbsp;%</span>
                        </div>
                    </div>

                    <div class="config-item">
                        <span>显示更多</span>
                        <ul flex class="week-part">
                            <li>
                                <el-checkbox-button border size="small" mr6>发薪日</el-checkbox-button>
                                <el-checkbox-button border size="small" mr6>距离周五</el-checkbox-button>
                                <el-checkbox-button border size="small" mr6>下一个节日</el-checkbox-button>
                                <el-checkbox-button border size="small">今日收入</el-checkbox-button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Icon from '@/components/icon/index.vue'

const visible = ref(false)

const dots = [1, 2, 3, 4, 5]
const weekDays = ref(
    [{ label: '周一', value: false }, { label: '周二', value: false }, { label: '周三', value: false },
    { label: '周四', value: false }, { label: '周五', value: false }, { label: '周六', value: false },
    { label: '周日', value: false }, { label: '工作日', value: false }]
)

const fontColors = ['#fff', '#333', '#9DE5FE', '#B8C5FF', '#EFABC4', '#DACCFD', '#FCEABA', '#F4F7CA', '#D0EABB']
const bgColors = ['#fff', 'rgb(251, 190, 35)', 'rgb(252, 69, 72)', 'rgb(75, 60, 54)', 'rgb(125, 172, 104)', 'rgb(2, 51, 115)', 'rgb(200, 172, 112)', 'rgb(244, 238, 230)', 'rgb(55, 33, 40)', 'rgb(200, 44, 52)', 'rgb(5, 64, 146)', 'rgb(163, 221, 185)', 'rgb(36, 88, 119)']
const bgImgs = [
    { url: 'https://files.codelife.cc/itab/widget/yiyan/1.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/2.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/3.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/4.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/5.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/6.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/7.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/8.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/9.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/10.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/11.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/12.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/13.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },
    { url: 'https://files.codelife.cc/itab/widget/yiyan/14.jpg?x-oss-process=image/resize,limit_0,m_fill,w_42,h_52/quality,q_92/format,webp' },

]

const name = ref('下班倒计时')
const translateX = ref(0)
const duration = ref(0)
const leftWidth = 420
const leftHeight = 190
const maxRotateX = 10
const maxRotateY = 10
const rotateX = ref(0)
const rotateY = ref(0)
const showArrows = ref(false)
const workDate = ref<[Date, Date]>([
    new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 8, 30),
    new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 17, 30)
])
const bgActive = ref(1)
const imgTranslateX = ref(0)
const imgDuration = ref(300)
const slider = ref(0)

const handleChangeBgType = (type: number) => {
    bgActive.value = type
}

let carouselDom: HTMLDivElement | null = null
let scrollDom: HTMLDivElement | null = null
const time = ref('')
const handleShow = () => {
    visible.value = true
    nextTick(() => {
        carouselDom = document.querySelector('#carousel-main')
        scrollDom = document.querySelector('#img-scroll')
        carouselDom?.addEventListener('mousemove', handleMouseMove, { passive: true })
        carouselDom?.addEventListener('mousedown', handleMouseDown, { passive: true })
        scrollDom?.addEventListener('wheel', handleScrollWheel)
        scrollDom?.addEventListener('mousedown', handleScrollDown)
    })
}

let timeFlag: any = null
onMounted(() => {
    getWeekDay()
    timeFlag = setInterval(() => {
        handleSelectWorkDate()
    }, 1000)
})

onUnmounted(() => {
    clearInterval(timeFlag)
})

const getWeekDay = () => {
    const day = new Date().getDay()
    if (day == 0) {
        weekDays.value[6].value = true
    } else if (day == 6)
        weekDays.value[5].value = true
    else
        weekDays.value[7].value = true
}

const handleSelectWorkDate = () => {
    let now = new Date()
    if (workDate.value![0].valueOf() > now.valueOf() || now.valueOf() > workDate.value![1].valueOf()) {
        return
    }

    const residueTime = workDate.value![1].valueOf() - now.valueOf()
    getResidueTime(residueTime)
}

const getResidueTime = (residueTime: number) => {
    const SECOND = 1 * 1000
    const MINUTE = SECOND * 60
    const HOUR = MINUTE * 60
    const DAY = HOUR * 24

    let hours = Math.floor((residueTime % DAY) / HOUR);
    let minutes = Math.floor((residueTime % HOUR) / MINUTE);
    let seconds = Math.floor((residueTime % MINUTE) / SECOND);
    const hour = hours < 10 ? ('0' + hours) : hours
    const min = minutes < 10 ? ('0' + minutes) : minutes
    const second = seconds < 10 ? ('0' + seconds) : seconds
    time.value = hour + ':' + min + ':' + second
}

const handleMoveRight = () => {
    //清除鼠标抬起事件，不然会冲突
    document!.onmouseup = null
    translateX.value -= leftWidth
    if (translateX.value + dots.length * leftWidth == 0) {
        translateX.value = 0
    }
}

const handleMoveLeft = () => {
    //清除鼠标抬起事件，不然会冲突
    document!.onmouseup = null
    if (translateX.value == 0) {
        translateX.value = -(dots.length - 1) * leftWidth
    } else
        translateX.value += leftWidth
}

const handleMove = (index: number) => {
    translateX.value = -index * leftWidth
}

const handleClose = () => {
    visible.value = false
    carouselDom?.removeEventListener('mousemove', handleMouseMove)
    carouselDom?.removeEventListener('mousedown', handleMouseDown)
    scrollDom?.removeEventListener('wheel', handleScrollWheel)
    scrollDom?.removeEventListener('mousedown', handleScrollDown)
}

const handleScrollDown = (e: any) => {
    imgDuration.value = 0
    document.onmousemove = (el: any) => {
        imgTranslateX.value = el.pageX - e.pageX
        document.onmouseup = () => {
            imgDuration.value = 300
            if (imgTranslateX.value > 0)
                imgTranslateX.value = 0
            if (imgTranslateX.value < -(bgImgs.length - 9) * 47) {
                imgTranslateX.value = -(bgImgs.length - 9) * 47
            }
            document.onmousemove = scrollDom!.onmousedown = null
        }

    }
}

//背景图片滚动
const handleScrollWheel = (e: any) => {
    e.preventDefault()
    e.wheelDeltaY < 0 ? imgTranslateX.value -= 47 : imgTranslateX.value += 47
    if (imgTranslateX.value >= 0) {
        setTimeout(() => imgTranslateX.value = 0, 100)
    }
    if (imgTranslateX.value <= -(bgImgs.length - 9) * 47) {
        setTimeout(() => imgTranslateX.value = -(bgImgs.length - 9) * 47, 100)
    }
}

const handleMouseMove = (e: any) => {
    //以div中心为原点，通过比例计算旋转的度数
    const y = e.offsetY - leftHeight / 2
    const x = e.offsetX - leftWidth / 2
    rotateX.value = -maxRotateX * y / (leftHeight / 2)
    rotateY.value = maxRotateY * x / (leftWidth / 2)
}

const handleMouseDown = (e: any) => {
    const x = e.pageX
    const translate = translateX.value
    duration.value = 300
    document!.onmousemove = (el: any) => {
        let tx = x - el.pageX
        if (-tx > leftWidth)
            tx = -leftWidth
        if (tx > leftWidth)
            tx = leftWidth
        translateX.value = -tx + translate
        document!.onmouseup = () => {
            if (tx > 0 && tx >= leftWidth / 2) {
                if (translate + (dots.length - 1) * leftWidth == 0)
                    translateX.value = 0
                else
                    translateX.value = translate - leftWidth
            } else if (tx < 0 && -tx >= leftWidth / 2) {
                if (translate == 0) {
                    translateX.value = -(dots.length - 1) * leftWidth
                } else
                    translateX.value = translate + leftWidth
            } else {
                translateX.value = translate
            }
            carouselDom!.onmousedown = document!.onmousemove = null
            duration.value = 0
        }
    }
}

//选择颜色
const fontColor = ref('#fff')
const handleSelectColor = (color: string) => {
    fontColor.value = color
}

const bgColor = ref('rgb(252, 69, 72)')
const bgStyle = ref<any>({ backgroundColor: bgColor.value })
const handleSelectBgColor = (color: string) => {
    bgColor.value = color
    bgStyle.value = { backgroundColor: bgColor.value }
}

const handleSelectBgImg = (img: string) => {
    bgStyle.value = { backgroundImage: `url(${img})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center' }
}

defineExpose({
    handleShow
})
</script>

<style lang="scss">
.work-container {
    --iconsize: 60px;
    --icon-padding: 30px;

    .el-dialog {
        border-radius: 4px;

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            height: 550px;
            padding: 0;

            .work-body {
                display: flex;
                height: 100%;

                .left-part {
                    width: 420px;
                    height: 100%;

                    .carousel-part {
                        height: 190px;
                        margin-top: 120px;
                        position: relative;
                        overflow: hidden;

                        .carousel-main {
                            transition-property: transfrom;
                            transition-timing-function: cubic-bezier(.4, 0, .2, 1);


                            .carousel-item {
                                flex-shrink: 0;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .item-cal {
                                    border-radius: 16px;
                                    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.15);
                                    cursor: pointer;
                                    background-color: rgb(75, 60, 54);
                                    transition: background .5s;

                                    .item-bg {
                                        height: 100%;
                                        width: 100%;
                                        background-image: url('@/assets/images/onwork.webp');
                                        background-position: center;
                                        background-repeat: no-repeat;
                                        background-size: cover;
                                    }

                                    .check-more {
                                        width: 100%;
                                        height: 50%;
                                        display: flex;

                                        .check-item {
                                            height: 100%;
                                            width: 15.5%;
                                            border-radius: 6px;
                                            margin-right: 6px;
                                            padding: 6px 2px;
                                            background-color: #ffffff1f;
                                            text-align: center;
                                            font-size: 12px;
                                            line-height: 1.5;
                                        }
                                    }
                                }
                            }
                        }

                        .left-arrow,
                        .right-arrow {
                            position: absolute;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background-color: rgb(0, 0, 0, .15);
                            text-align: center;
                            line-height: 30px;
                            cursor: pointer;
                            color: #9c99a7;
                        }

                        .left-arrow:hover,
                        .right-arrow:hover {
                            background-color: rgb(0, 0, 0, .6);
                        }

                        .left-arrow {
                            left: 5px;
                            top: 80px
                        }

                        .right-arrow {
                            right: 5px;
                            top: 80px;
                        }

                        .carousel-dots {
                            position: absolute;
                            bottom: 5px;
                            left: 50%;
                            transform: translateX(-50%);

                            .dot-item {
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                cursor: pointer;
                                background-color: rgb(0, 0, 0, .15);
                                transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1);
                                margin: 0 4px;

                                &.active {
                                    background-color: rgb(0, 0, 0, .6) !important;
                                    transform: scale(1.4);
                                }
                            }
                        }
                    }
                }

                .iconsize-1 {
                    width: var(--iconsize);
                    height: var(--iconsize);
                }

                .iconsize-2 {
                    width: calc(var(--iconsize)*2 + var(--icon-padding));
                    height: var(--iconsize);
                    padding: 6px 12px;
                    align-items: center;
                    display: flex;
                    justify-content: space-between;

                    .item-bg {
                        width: 54px !important;
                    }
                }

                .iconsize-3 {
                    width: var(--iconsize);
                    height: calc(var(--iconsize)*2 + var(--icon-padding));
                    padding: 12px 6px;
                    align-items: center;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;

                    .item-bg {
                        height: 55px !important;
                    }
                }

                .iconsize-4 {
                    width: calc(var(--iconsize)*2 + var(--icon-padding));
                    height: calc(var(--iconsize)*2 + var(--icon-padding));
                    padding: 12px 12px;
                    align-items: center;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;

                    .item-bg {
                        height: 65% !important;
                        background-size: contain !important;
                    }
                }

                .iconsize-5 {
                    width: calc(var(--iconsize)*4 + var(--icon-padding)*3);
                    height: calc(var(--iconsize)*2 + var(--icon-padding));
                    padding: 12px 12px;
                    position: relative;

                    .item-bg {
                        position: absolute;
                        width: 30% !important;
                        bottom: 0;
                        right: 10px;
                        background-size: contain !important;
                    }
                }

                .right-part {
                    height: 100%;
                    width: calc(100% - 420px);
                    position: relative;
                    background-color: #f1f0f5;
                    padding: 20px;
                    box-sizing: border-box;

                    .work-header {
                        position: absolute;
                        top: 0px;
                        right: 4px;

                        span {
                            width: 20px;
                            background-color: rgb(0, 0, 0, .2);
                            border-radius: 50%;
                            height: 20px;
                            display: flex;
                            justify-content: center;
                            margin-top: 4px;
                            margin-right: 4px;
                            align-items: center;

                        }

                        span:hover {
                            background-color: red;
                        }
                    }

                    .config-item {
                        @apply w-full flex;
                        height: 46px;
                        margin-bottom: 10px;
                        line-height: 30px;
                        background-color: white;
                        border-radius: 6px;
                        padding: 8px 16px;
                        justify-content: space-between;
                        align-items: center;

                        .el-input {
                            width: 200px;

                            .el-input__wrapper {
                                border-radius: 8px;
                                background-color: #f1f0f5;
                            }
                        }

                        .week-part {
                            justify-content: space-around;
                            list-style: none;
                            color: #939393;
                            font-size: 12px;

                            li {
                                margin-right: 6px;
                                cursor: pointer;

                                .el-checkbox-button {
                                    width: auto;
                                    border-radius: 5px;
                                    background-color: #f0f1f4;
                                    border: 2px solid #f0f1f4;
                                    padding: 0 2px;

                                    &.is-focus {
                                        border: 2px solid #f0f1f4;
                                    }

                                    &.is-checked {
                                        border: 2px solid #939393;
                                        color: rgb(0, 0, 0, .6);
                                    }

                                    .el-checkbox-button__inner {
                                        width: 100%;
                                        padding: 0;
                                        background-color: #f0f1f4;
                                        font-size: 12px;

                                        color: #939393;
                                        border: none;
                                    }

                                }
                            }
                        }

                        .font-part {
                            justify-content: space-around;
                            list-style: none;
                            align-items: center;

                            .font-item {
                                height: 18px;
                                width: 18px;
                                border-radius: 50%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin: 0 7px;
                                cursor: pointer;
                                position: relative;
                                font-size: 18px;
                                transition: all .3s;

                                .icon {
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                }
                            }

                            .el-color-picker {
                                display: block;
                                margin-left: 6px;

                                .el-color-picker__trigger {
                                    padding: 0;
                                    width: 18px;
                                    height: 18px;
                                    border-radius: 50%;
                                    border: none;

                                    .el-color-picker__color {
                                        border-radius: inherit;

                                        .el-color-picker__color-inner {
                                            background-image: url('');
                                            background-repeat: no-repeat;
                                            background-size: cover;
                                            background-color: transparent !important;
                                            border-radius: 50%;
                                        }
                                    }
                                }
                            }

                            .el-color-picker:hover {
                                transform: scale(1.2);
                            }

                            .font-item:hover {
                                transform: scale(1.2);
                            }

                            .is-white {
                                border: 1px solid #0000004d;
                            }
                        }

                        .el-date-editor.el-input,
                        .el-date-editor.el-input__wrapper {
                            width: 200px;
                            border-radius: 8px;
                            background-color: #f1f0f5;
                        }
                    }

                    .img-item {
                        height: 100px;
                        align-items: normal;
                        flex-direction: column;

                        .img-part {
                            height: 70px;

                            .scroll-part {
                                overflow: hidden;

                                cursor: pointer;

                                .img-li {
                                    width: 42px;
                                    height: 52px;
                                    margin-right: 4px;
                                    list-style: none;
                                    border-radius: 6px;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 6px;

                                    }
                                }
                            }
                        }

                        .slider-part {
                            color: #222;

                            .el-slider {
                                width: 75%;
                            }
                        }
                    }

                    .bg-part {
                        width: 100%;
                        margin: 0 0 8px 15px;
                        font-size: 14px;
                        color: #222;
                        line-height: 0.8;

                        span {
                            margin: 0 5px;
                            padding: 2px 4px;
                            color: rgb(0, 0, 0, .5);
                            cursor: pointer;

                            &.active {
                                background-color: rgb(0, 0, 0, .2);
                                color: #fff;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }


        }
    }
}
</style>